<template>
<!-- 编辑角色管理 -->
    <div>
        <public-editor :el_title="title">
            <template slot="buttonEditor">
                <el-button style="float: right;" ><router-link :to="{path:'/role/management'}">返回</router-link></el-button>
            </template>
            <template slot="editorContent">
                <el-form label-position="left"  :model="ruleForm" :rules="rules" ref="ruleForm" label-width="160px" class="demo-ruleForm edit-from">
                    <div class="editorContent">
                        <el-form-item label="角色编码" prop="code">
                            <el-input v-model="ruleForm.code" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="角色名称" prop="name">
                            <el-input v-model="ruleForm.name" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="角色描述" prop="description">
                            <el-input v-model="ruleForm.description" style="width:40%"></el-input>
                        </el-form-item>
                        <el-form-item label="资源" prop="resourceIds">
                            <el-transfer v-model="ruleForm.resourceIds" :data="resourceList" :titles="['未选资源', '已选资源']"
                            :props="{key: 'id',label: 'name'}"></el-transfer>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleAdd('ruleForm')">提交</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </template>
        </public-editor>
    </div>
</template>
<script>
import publicEditor from "manage-sys-libs/src/components/managePublicEditor/index.vue"
export default {
    components:{
        publicEditor,
    },
    data(){
        return{
            title:"添加角色",
            // 所在城市
            ruleForm: {
                code:"",
                description:"",
                name:"",
                resourceIds:[],
            },
            rules: {
                code: [
                    { required: true, message: '请输入角色编码', trigger: 'blur' },
                ],
                description: [
                    { required: true, message: '请输入角色描述', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ],
                resourceIds: [
                    { required: true, message: '请选择资源', trigger: 'blur' },
                ],
                
            },
            addorupdate:true, 
            resourceList:[]                  
        };
    },
    created(){
        this.all_resource();
        if(this.$route.query && this.$route.query.type === "edit"){
            let data = this.$store.getters.roleListItem;
            if(data){
                this.ruleForm.id = data.id;
                this.ruleForm.code = data.code;
                this.ruleForm.description = data.description;
                this.ruleForm.name = data.name;
                this.byId_resource(data.id);
                this.title = "编辑角色";
                this.addorupdate = false;
                // 处理图片
                this.loadUrl = this.ruleForm.logoUrl;
            }else{
                this.title = "添加角色";
                this.addorupdate = true;
            }
        }
    },
    methods: {
        // 提交
        handleAdd(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.addorupdate){
                        // 添加
                        this.$store.dispatch("role_page/add_roleAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/role/management'})
                            };
                        })
                    }else{
                        // 编辑
                        this.$store.dispatch("role_page/update_roleAddObj",this.ruleForm)
                        .then(res=>{
                            if(res){
                                this.$router.push({path:'/role/management'})
                            };
                        })
                    } 
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 获取所有资源
        all_resource(date){
            this.$store.dispatch("role_page/selectAll_resourceAddObj",date)
            .then(res=>{
                if(res){
                    this.resourceList = res;
                };
            })
        }, 
        // 根据id获取对应资源
        byId_resource(id){
            this.$store.dispatch("role_page/selectById_resourceAddObj",{roleId:id})
            .then(res=>{
                if(res){
                    this.ruleForm.resourceIds = [];
                    res.forEach(item=>{
                        this.ruleForm.resourceIds.push(item.id)
                    })
                   
                };
            })
        },      
    }
    
}
</script>
<style lang="scss" scope>
.edit-from{
    .firstClass{
        .el-input{
            width: auto;
        }
    }
    
}



</style>